<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 冒泡事件触发 -->
			<div @click="divClick">
				1111
				<button type="button" @click="btnClick">按钮</button>
			</div>
			<!-- 阻止冒泡事件触发的修饰符.stop -->
			<div @click="divClick">
				1111
				<button type="button" @click.stop="btnClick">按钮</button>
			</div>
			<!-- 阻止表单自动提交修饰符.prevent -->
			<form action="a.com" >
				<input type="submit" name="" id="" value="提交" @click.prevent="submitClick"/>
			</form>
			<!-- 监听某个按钮的键盘事件 -->
			<input type="text" @keyup.enter="keyUp">
			<!-- 自定义组件写监听需要用native -->
			<cpn @click.native="capClick"></cpn>
			<!-- 只能监听1次 -->
			<input type="button" @click.once="keyUp" value="123">
		</div>
	</body>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const app = new Vue({
			el:"#app",
			data:{
				message: "你好啊"
			},
			methods:{
				btnClick(){
					console.log("btnClick");
				},
				divClick(){
					console.log("divClick");
				},
				submitClick(){
					console.log("提交按钮");
				},
				keyUp(){
					console.log('up');
				}
			}
		})
	</script>
</html>
